<template>
  <a-form ref="form" layout="inline">
    <a-form-item>
      <a-select
        style="width: 200px"
        :options="dataList"
        v-model:value="formData.state"
        placeholder="请选择房间状态"
      ></a-select>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="search">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
// import Selector from '@gis/lib/components/selector';
export default {
  name: 'hotel-room-filter',
  // components: { Selector },
  props: {
    value: { type: Object, default: () => ({}) },
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        this.formData = Object.assign({}, this.formData, val);
      },
    },
  },
  data() {
    return {
      formData: {
        state: undefined,
      },
      dataList: [
        { label: '租住中', value: '2' },
        { label: '空闲', value: '1' },
        { label: '预警', value: '3' },
      ],
    };
  },
  methods: {
    getFormData() {
      return Object.assign({}, this.formData);
    },
    search() {
      const formData = this.getFormData();
      this.$emit('update:modelValue', formData);
      this.$emit('input', formData);
      this.$emit('search', formData);
    },
    reset() {
      this.formData = { state: undefined };
      const formData = this.getFormData();
      this.$emit('reset', formData);
      this.search();
    },
  },
};
</script>

<style scoped></style>
